<template>
  <div class="homepage">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      :label-position="labelPosition"
    >
      <el-form-item label="抄送" prop="">
        <el-switch
          v-model="ruleForm.ccswitch"
          :active-value="1"
          :inactive-value="0"
          class="main-el-switch"
          :width="60"
          active-text="开"
          inactive-text="关"
        />
      </el-form-item>
      <el-form-item label="抄送人" prop="">
        <el-row :gutter="5">
          <el-col :span="4">
            <el-form-item
              label=""
              prop="ccRole"
              label-width="0px"
              class="item"
            >
              <el-input
                v-model="ruleForm.ccRole"
                style="width: 200px"
                placeholder="选角色"
                :disabled="ruleForm.ccswitch===0"
                @click.native="popUpClick(0)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="ccPersonnel" label-width="0px" class="item">
              <el-input
                v-model="ruleForm.ccPersonnel"
                style="width: 200px"
                placeholder="选人员"
                :disabled="ruleForm.ccswitch===0"
                @click.native="popUpClick(1)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- style="display:none" -->
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >立即创建</el-button>
      </el-form-item>
    </el-form>
    <popUp
      :poshow="popUpObj[popUpIndex].show"
      :type="popUpObj[popUpIndex].type"
      :title="popUpObj[popUpIndex].potitle"
      :echo="popUpObj[popUpIndex].commitArray"
      :index="popUpIndex"
      @handleClose="handleClose"
      @handleDetermine="handleDetermine"
    />
  </div>
</template>

<script>

import popUp from '../components/pop.vue'
export default {
  components: {
    popUp
  },
  data() {
    return {
      labelPosition: 'left',
      ruleForm: {
        ccswitch: null,
        ccRole: '',
        ccPersonnel: ''
      },
      popUpObj: [
        {
          show: false,
          type: '1',
          potitle: '选角色',
          commitArray: []
        },
        {
          show: false,
          type: '2',
          potitle: '选人员',
          commitArray: []
        }

      ],
      popUpIndex: 0, // 点击的

      rules: {
        ccRole: [
          { required: true, message: '请选择抄送角色', trigger: 'change' }
        ],
        ccPersonnel: [
          { required: true, message: '请选择抄送人员', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    'ruleForm.ccswitch'(newval) {
      if (newval === 0) {
        this.rules = {}
        this.$refs['ruleForm'].resetFields()
      } else {
        this.rules = {
          ccRole: [
            { required: true, message: '请选择抄送角色', trigger: 'change' }
          ],
          ccPersonnel: [
            { required: true, message: '请选择抄送人员', trigger: 'change' }
          ]
        }
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击弹窗
    popUpClick(index) {
      this.popUpIndex = index
      this.popUpObj[this.popUpIndex].show = true
    },
    // 弹窗确定
    handleDetermine(str, newarr, index) {
      if (index === 0) {
        this.ruleForm.ccRole = str
      } else if (index === 1) {
        this.ruleForm.ccPersonnel = str
      }
      this.popUpObj[index].show = false
      this.popUpObj[index].commitArray = newarr
    },
    // 关闭弹窗
    handleClose(index) {
      this.popUpObj[index].show = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {
    position: relative;
    .el-switch__core {
      height: 24px;
      border-radius: 12px;
      &:after {
        left: 4px;
        top: 3px;
      }
    }
    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            margin-left: -20px;
            left: 100%;
          }
        }
      }
    }
    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }
      .el-switch__label--right {
        opacity: 1;
      }
    }
    .el-switch__label {
      position: absolute;
      top: 0;
    }
    .el-switch__label--left {
      right: 0;
      color: #999;
      z-index: 1;
      margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      margin-left: 8px;
    }
  }
}
</style>
<style scoped>
</style>
